import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  List,
  Grid,
  Flex
} from 'antd-mobile'


export class HeaderSelector extends Component {
  constructor(props) {
    super(props)
    // 准备要显示的图片列表
    this.headerList = []
    for (let index = 0; index < 20; index++) {
      this.headerList.push({
        text: `头像${ index + 1 }`,
        icon: require(`../../assets/images/头像${ index + 1 }.png`)
      })
    }
  }

  // 接收props
  static propTypes = {
    setHeader: PropTypes.func.isRequired
  }

  state = {
    icon: null
  }

  handleClick = (iconObj)=>{
    this.setState({ icon: iconObj.icon })
    this.props.setHeader(iconObj.text)
  }

  render() {
    const { icon } = this.state
    const listHeader = !icon ? "请选择头像" : (
      <Flex>
        <span>已选择头像：</span>
        <img src={icon} alt="" style={{width:'30px',height:'30px'}}/>
      </Flex>
    )
    return (
      <div>
        <List renderHeader={()=>listHeader}>
          <Grid data={this.headerList} columnNum={5} onClick={(iconObj,index)=>{this.handleClick(iconObj)}}></Grid>
        </List>
      </div>
    )
  }
}

export default HeaderSelector
